<template>
  <div class="tv">
      <div>
          <h1>听书电台</h1>
          <span @click="list">畅听更多精品电台</span>
      </div>
        <div class="tv-bottom">
            <ul>
                <li v-for="(item,index) in rad" :key="index" @click="send(item.id)">
                    <img :src="item.pic" alt="">
                    <p>{{item.desc}}</p>
                </li>
            </ul>
        </div>
  </div>
  
</template>

<script>

import {radio} from '../../api/index'
export default {
    data(){
        return {
            rad:[],
            tv:[]
        }
    },
    methods:{
        radio(){
            this.axios.get(radio).then(res=>{
                // console.log(res.data.data.list);
                this.rad=res.data.data.list
            }).catch(err=>{
                console.log(err);
            })
        },
        send(i){
            this.$router.push({
                path:'/bookdetail',
                query:{
                    detailid:i
                }
            })
        },
        list(){
             this.$router.push({
                path:'/book',
                
            })
        }
    },
    created(){
        this.radio()
        
    }
}
</script>

<style lang="scss" scoped>
.tv{
    width: 1400px;
    margin: 20px auto;
   
    div{
        display: flex;
        span{
            margin-top: 15px;
            margin-left: 30px;
            cursor: pointer;
        }
    }
    .tv-bottom{
        ul{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            li{
                cursor: pointer;
                margin-top: 20px;
                img{
                    width: 150px;
                    height: 150px;
                    border-radius: 50%;
                }
                p{
                    // text-align:center;
                    width: 250px;
                     white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }
    }
    
}
</style>